<template>
  <div class="detail_content">
    <h2>蜂首游记</h2>
    <van-image width="100vw" height="40vw" fit="cover" :src="image"></van-image>
    <h2 class="detail_title">{{ content.title }}</h2>
    <div class="author">
      <van-image round height="100" width="100" :src="authorImg"></van-image>
      <div class="author_des">
        <p class="name">{{ content.author }}</p>
        <p>36篇游记，1715粉丝</p>
        <van-circle class="radyt" v-model="count" :rate="100" :speed="50" size="20px" :stroke-width="120" clockwise/>
        <!-- {{count}} -->
      </div>
      <div class="location">{{ address }}</div>
    </div>
    <div class="content_box" v-html="content.content"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mid: "",
      content: {},
      authorImg: "",
      address: "",
      image: "",
      text:'',
      count: Number(100),
      timer: null,
    };
  },
  mounted() {
    this.mid = this.$route.query.mid
    // console.log(this.$route.query);
    this.load_detail();

    this.timers()
  },
  methods: {
    load_detail() {
      this.$http.get("/communDetail?mid=" + this.mid).then((result) => {
        console.log(result);
        this.content = result.data.data[0];
        this.authorImg = result.data.data[0].authorImg.split("?")[0];
        this.address = result.data.data[0].address.split("，")[0];
        this.image = result.data.data[0].image.split("?")[0];
      });
    },

    // 倒计时
    timers() {
      const TIME_COUNT = 100;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            clearInterval(this.timer);
            this.timer = null;
            this.count = "";
          }
          if(this.count<=0){
              this.count=100
          }
        }, 300);
      }
    },
  },
};
</script>

<style lang = "scss" scoped>
.detail_content {
  h2 {
    color: #717376;
    text-align: center;
    margin-top: 0;
  }
  .detail_title {
    color: #474747;
    padding: 0 5px;
  }
  .author {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 30px;
    .author_des {
      font-size: 12px;
      color: #767676;
      margin-left: 5px;
      line-height: 25px;
      .name {
        font-size: 16px;
      }
    }
    .location {
      font-size: 30px;
      color: #111;
      min-width: 100px;
      border-left: 1px solid #e5e5e5;
      line-height: 100px;
      text-align: center;
    }
  }
  .content_box {
    width: 95vw;
    padding: 8px;
    overflow-x: hidden;
  }
}
</style>
<style>
.detail_content .content_box h2,
.detail_content .content_box p,
.detail_content .content_box a {
  color: #474747;

  font-size: 18px;
}
/* .detail_content .content_box div {
            
        }
        .detail_content .content_box img{
            
        } */
        .radyt{
            position: fixed;
            top: 450px;
            right: 20px;
        }
</style>